<extend name="_Layout/main"/>

<block name="style">

</block>



<block name="main">
    <section>
        <section class="vbox">
            <section id="vbox" class="scrollable wrapper-lg">
                <div class="phrase">
                    <div class="comment-box">
                        <notempty name="__USER__">
                            <div class="form-group">
                                <textarea name="content" id="ABeepContent" class="form-control new-comment-text" rows="3" placeholder="一哔，你想说什么就发什么..."></textarea>
                            </div>
                            <div class="form-group">
                                <input type="hidden" name="pid" value="0">
                                <input type="hidden" name="table" value="{$__CURRENT_TABLE_ID__}">
                                <input type="hidden" name="group" value="0">
                                <input type="hidden" name="data_id" value="{$info.id}">
                                <table style="display:inline-block">
                                    <tr>
                                        <td>
                                            <div id="preview_comment_picture"></div>
                                        </td>
                                        <td>
                                            <input type="hidden" id="pictures" name="pictures">
                                            <div id="upload_comment_picture" title="上传图片"></div>
                                        </td>
                                    </tr>
                                </table>
                                <style type="text/css">
                                    /* 多图上传样式 */
                                    .img-box{
                                        position:relative;vertical-align: top;
                                    }
                                    .img-box img{
                                        width:30px;height:30px;margin-right:8px;
                                    }
                                    .img-box i{
                                        color:red;position:absolute;top:-8px;right:2px;background:#fff;border-radius:20px;
                                    }
                                </style>
                                <script type="text/javascript">
                                  $(function(){
                                    $('#upload_comment_picture').Huploadify({
                                      uploader:'{:U("PublicUpload/upload")}',
                                      fileTypeExts:'*.gif;*.jpg;*.jpeg;*.png;*.bmp',
                                      fileSizeLimit:{:C('UPLOAD_IMAGE_SIZE')}*1024,
                                      buttonText:'<span class="fa fa-plus"></span>',
                                      onUploadComplete:function(file, data){
                                          var data = $.parseJSON(data);
                                          var input = $('input[name="pictures"]');
                                          var new_img = '<span class="img-box"><img class="img" src="' + data.url + '"  data-id="'+data.id+'"><i class="fa fa-times-circle"></i></span>';
                                          $('#preview_comment_picture').append(new_img);
                                          if(input.val()){
                                            input.val(input.val() + ',' + data.id);
                                          }else{
                                            input.val(data.id);
                                          }
                                      }
                                    });
                                    //删除图片
                                    $(document).on('click', '#preview_comment_picture .fa-times-circle', function() {
                                      var ready_for_remove_id = $(this).closest('.img-box').find('img').attr('data-id'); //获取待删除的图片ID
                                      if(!ready_for_remove_id){
                                        $.alertMessager('错误', 'danger');
                                      }
                                      var current_picture_ids = $('#pictures').val().split(","); //获取当前图集以逗号分隔的ID并转换成数组
                                      current_picture_ids.remove(ready_for_remove_id); //从数组中删除待删除的图片ID
                                      $('#pictures').val(current_picture_ids.join(',')) //删除后覆盖原input的值
                                      $(this).closest('.img-box').remove(); //删除图片预览图
                                    });
                                  });
                                </script>
                                <a id="AddAbeep" class="btn btn-primary ajax-post pull-right hidden-xs" href="javascript:;"><i class="fa fa-comment-o"></i> 发表一哔</a>
                            </div>
                            <else />
                            <div class="form-group" style="position: relative">
                                <textarea name="content" id="ABeepContent" class="form-control new-comment-text" rows="3" placeholder="一哔，你想说什么就发什么..."></textarea>
                                <a style="width: 100%;height: 100%;position: absolute;top: 0;background: #000;opacity: .2;" data-toggle="modal" data-target="#login-modal"></a>
                            </div>
                        </notempty>
                    </div>
                    <volist name="volist" id="vo">
                        <section class="row">
                            <php>$userinfo=M('User')->find($vo['uid']);</php>
                            <div class="ph_portrait col-xs-3 col-sm-2 col-md-2 col-lg-1">
                                <img src="{$userinfo.avatar|get_cover='avatar'}" alt="{$userinfo.username}">
                            </div>
                            <div class="ph_contert col-xs-8 col-sm-10 col-md-10 col-lg-11">
                                <p class="ph_text">{$vo.content}</p>
                                <div class="ph_pic">
                                    <?php if($vo[pictures]): ?>
                                        <div id="layer-photos" class="layer-photos">
                                            <php>$covers_list=explode(',',$vo['pictures']);</php>
                                            <volist name="covers_list" id="imgid">
                                                <img class="col-xs-3 col-sm-2 col-md-2 col-lg-2" layer-src="{$imgid|get_cover='Music'}" src="{$imgid|get_cover='Music'}">
                                            </volist>
                                        </div>
                                    <?php endif; ?>
                                </div>
                                <p class="ph_info">
                                    <span class="ph_name">BY: {$userinfo.username}</span>
                                    <span class="ph_date">TIME: {$vo.ctime|time_format='Y-m-d'}</span>
                                    <!--<a href="javascript:void(0);" class="reply-action" comment_id="{$vo.id}" username="{$userinfo.username}">回复</a>-->
                                </p>
                            </div>
                        </section>
                    </volist>
                </div>
                <script type="text/javascript">
                  $(function(){
                    $('.reply-action').click(function(event){
                      $('input[name=pid]').val($(this).attr('comment_id'));
                      $('.new-comment-text').focus().attr('placeholder', '回复'+$(this).attr('username'));
                    });
                  });

                  $("#AddAbeep").on("click",function(){
                    var content = $('#ABeepContent').val();    //内容
                    var pictures = $('#pictures').val();    //图片内容
                    //判断登录
                    $.post("{:U('PublicAbeep/add')}",{content:content,pictures:pictures},function(data){
                      if(data.status){
                        $.alertMessager(data.info, 'success');
                        $('#menu-discover-music li:nth-child(3) > a').trigger("click");   //模拟点击刷新本页列表
                      }else{
                        $.alertMessager(data.info, 'danger');
                      }
                    },'json');
                  });
                </script>
            </section>
        </section>
    </section>
</block>